
<%@ page contentType="text/html; charset=utf-8" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" 
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/jsp/common/include.base.jsp" %>
<style type="text/css">
	/* .menu-selected { font-weight:bold; font-size:15px; background-color:#fa6800; color:white; } */
	.menu-selected { font-weight:bold; font-size:15px; }
	.left-menu { width:200px; border:1px solid #eaeaea; position:absolute; top:10px; bottom:20px; overflow:hidden; }
	.left-menu li { display:block; padding:0px; }
	.left-menu li:not(:last-child) { border-bottom:1px solid #eaeaea; }
	.left-menu li>ul>li:first-child { border-top:1px solid #eaeaea; }
	.left-menu li>a { position:relative; display:block; text-decoration:none; font-size:12px; padding:8px 5px 5px 0px; color:black; }
	.left-menu li>a:hover { background-color:#1ba1e2; color:white; }
	.left-menu ul { padding:0px; margin:0px; }
	.left-menu .title { margin-left:25px; }
	.left-menu .icon { position:absolute; left:5px; }
	.left-menu .h1 .icon { top:13px; }
	.left-menu .h1 .title { font-size:18px; }
	/* .left-menu .h2 { background-color:#eaeaea; } */
	.left-menu .h2 { background-color:#d8d8d8; }
	.left-menu .h2 .icon { top:10px; }
	.left-menu .h2 .title { font-size:15px; }
	.left-menu .h3 { background-color:#f2f2f2; }
	.left-menu .h3 .icon { top:8px; }
	.left-menu .h3 .title { font-size:12px; }
</style>
<script type="text/javascript">
$(function() {
	$("#leftMenu li a").on("click", function(evt) {
// 		var $e = $(evt.target);
		var $e = $(this);
		
		$(".menu-selected").removeClass("menu-selected");
		$e.addClass("menu-selected");
		
 		$("#leftMenu li ul").not($e.parents("ul")).slideUp();
 		$e.parent().children("ul").slideDown();
	});
	
	$("#leftMenu>ul>li:first-child>a").trigger("click");	
});
</script>
</head>
<body>
<div class="left-menu" id="leftMenu">
<ul>
	<li><a class="h1" href="#"><span class="ui-icon ui-icon-folder-collapsed icon"></span><span class="title">header 1</span></a>
		<ul>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">1 menu 1</span></a></li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">1 menu 2</span></a></li>
		</ul>
	</li>
	<li><a class="h1" href="#"><span class="ui-icon ui-icon-folder-collapsed icon"></span><span class="title">header 2</span></a>
		<ul>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">2 menu 1</span></a></li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">2 menu 2</span></a></li>
		</ul>
	</li>
	<li><a class="h1" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">header 3</span></a></li>
	<li><a class="h1" href="#"><span class="ui-icon ui-icon-folder-collapsed icon"></span><span class="title">header 4</span></a>
		<ul>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-folder-collapsed icon"></span><span class="title">4 menu 1</span></a>
				<ul>
					<li><a class="h3" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4,1 sub menu 1</span></a></li>
					<li><a class="h3" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4,1 sub menu 2</span></a></li>
				</ul>
			</li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4 menu 2</span></a></li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4 menu 3</span></a></li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-folder-collapsed icon"></span><span class="title">4 menu 4</span></a>
				<ul>
					<li><a class="h3" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4,4 sub menu 1</span></a></li>
					<li><a class="h3" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4,4 sub menu 2</span></a></li>
				</ul>
			</li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4 menu 5</span></a></li>
			<li><a class="h2" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">4 menu 6</span></a></li>
		</ul>
	</li>
	<li><a class="h1" href="#"><span class="ui-icon ui-icon-document icon"></span><span class="title">header 5</span></a></li>
</ul>
</div>
<div style="position:absolute;height:18px;width:200px;bottom:10px; /* border:1px solid red; */">
<span style="width:100px;display:inline-block;height:18px;"></span>
<span style="width:100px;display:inline-block;height:18px;"></span>
</div>
</body>
</html>